<template>
  <div class="directorys-add">
    <el-dialog :title="`${data.id ? '修改' : '新增'}目录`" :visible.sync="show" width="400px">
      <el-form ref="form" size="small" label-width="80px" :model="formModel" :rules="formRules">
        <el-form-item label="所属学科" v-if="!$route.query.id" prop="subjectID">
          <el-select v-model="formModel.subjectID" style="width: 100%">
            <el-option v-for="item in subjectOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="formModel.directoryName" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="show = false">取消</el-button>
        <el-button @click="confirm()" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from "@/api/hmmm/directorys";
import { simple as subjectList } from "@/api/hmmm/subjects";
export default {
  // 组件名称
  name: "DirectorysAdd",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    data: {
      default: () => {},
      type: Object,
    },
  },
  // 组件状态值
  data() {
    return {
      show: false,
      formModel: {
        id: null,
        subjectID: null,
        directoryName: null,
      },
      formRules: {
        subjectID: [{ type: "number", message: "请选择所属学科", tirgger: "blur" }],
        directoryName: [{ required: true, message: "请输入目录名称", tirgger: "blur" }],
      },
      subjectOptions: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  async created() {
    // 学科下拉选项
    const { data: subjectArr } = await subjectList();
    this.subjectOptions = subjectArr;
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    open() {
      this.show = true;
      if (this.data.id) {
        const { id, subjectID, directoryName } = this.data;
        this.formModel = { id, subjectID, directoryName };
      } else {
        this.formModel = {
          id: null,
          subjectID: +this.$route.query.id || null,
          directoryName: null,
        };
      }
      // 清除校验效果
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    async confirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          // 提交
          if (!this.data.id) {
            // 新增
            await add(this.formModel);
          } else {
            // 修改
            this.formModel.id = this.data.id;
            await update(this.formModel);
          }
          this.$message.success("操作成功");
          this.show = false;
          this.$emit("updateList");
        }
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
